<template>
    <PageView :loading="systemRoleManagerStore.isPageLoading">
        <!-- 表格工具栏 -->
        <vxe-toolbar ref="toolbarRef"
                     :buttons="toolbarButtons"
                     @button-click="buttonClickEvent"
                     custom/>

        <!-- 表格 -->
        <vxe-table
            ref="tableRef"
            border
            stripe
            empty-text="暂无数据"
            :loading="systemRoleManagerStore.isTableLoading"
            :column-config="{resizable: true}"
            :row-config="{isHover: true}"
            :checkbox-config="{labelField: 'id', highlight: false, range: true}"
            :data="systemRoleManagerStore.tableDataList">
            <vxe-column field="roleName" title="角色名称" min-width="100px" sortable/>
            <vxe-column field="roleCode" title="角色编码" min-width="100px" show-overflow/>
            <vxe-column title="操作" fixed="right">
                <template #default="{row}">
                    <vxe-button mode="text" status="primary" @click="edit(row)">编辑菜单</vxe-button>
                    <vxe-button mode="text" status="error" @click="del(row)">删除角色</vxe-button>
                </template>
            </vxe-column>
        </vxe-table>

        <!-- 新增角色 -->
        <system-role-add-component/>

        <!-- 角色菜单管理 -->
        <system-role-menu-component v-if="selectRow" :system-role-info="selectRow"/>
    </PageView>
</template>

<script setup lang="ts">
import PageView from '@/views/layout/PageView.vue';
import { onMounted, ref } from 'vue';
import { VxeTableInstance, VxeToolbarEvents, type VxeToolbarInstance, VxeToolbarPropTypes } from 'vxe-table';
import MessageUtils from '@/utils/MessageUtils.ts';
import { useSystemRoleManagerStore } from '@/store/UseSystemRoleManagerStore.ts';
import SystemRoleAddComponent from '@/views/system/SystemRoleAddComponent.vue';
import { SystemRoleInfoVO } from '@/entiy/vo/SystemRoleInfoVO.ts';
import { useSystemRoleMenuComponentStore } from '@/store/UseSystemRoleMeunComponentStore.ts';
import SystemRoleMenuComponent from '@/views/system/SystemRoleMenuComponent.vue';
import { UserRoleService } from "@/service/UserRoleService.ts";

// 状态管理 Store
const systemRoleManagerStore = useSystemRoleManagerStore();
const systemRoleMenuComponentStore = useSystemRoleMenuComponentStore();

// 当前选中的行数据
const selectRow = ref<SystemRoleInfoVO>();

// 表格工具栏引用
const toolbarRef = ref<VxeToolbarInstance>();

// 表格引用
const tableRef = ref<VxeTableInstance>();

// 表格工具栏配置
const toolbarButtons = ref<VxeToolbarPropTypes.Tools>([
    {
        name: '新增',
        code: 'add',
        status: 'primary',
        icon: 'vxe-icon-add',
        size: 'small'
    },
]);

// 工具栏点击事件
const buttonClickEvent: VxeToolbarEvents.ButtonClick = ({code}) => {
    switch (code) {
        case 'add':
            systemRoleManagerStore.isShowAddSystemMenuModel = true;
            // systemRoleManagerStore.isShowAddModel = true;
            break;
        case 'del':
            // systemRoleManagerStore.isShowDelModel = true;
            break;
        case 'save':
            // systemRoleManagerStore.isShowSaveModel = true;
            break;
        default:
            break;
    }
};

// 编辑事件
const edit = (row: SystemRoleInfoVO) => {
    UserRoleService.isSuperManager(row.roleCode).then((isSuperManager) => {
        if (!isSuperManager) {
            selectRow.value = row;
            systemRoleMenuComponentStore.openAndReloadTableData(row);
        } else {
            MessageUtils.showErrorMessage('超级管理员默认全部菜单权限, 无需进行设置!');
        }
    }).catch((reason) => {
        MessageUtils.showErrorMessage(reason.message);
    });
};

// 删除事件
const del = (row: SystemRoleInfoVO) => {
    systemRoleManagerStore.isTableLoading = true;
    systemRoleManagerStore.deleteSystemRole(row).then(() => {
        MessageUtils.showSuccessMessage('删除角色信息成功!');
    }).catch((reason) => {
        MessageUtils.showErrorMessage(reason.message);
    }).finally(() => {
        systemRoleManagerStore.isTableLoading = false;
    });
};

// 页面加载事件
onMounted(() => {
    // 表格关联表格的工具栏
    const $table = tableRef.value;
    const $toolbar = toolbarRef.value;
    if ($table && $toolbar) {
        $table.connect($toolbar);
    }

    // 加载数据
    systemRoleManagerStore.isTableLoading = true;
    systemRoleManagerStore.getTableDataList().catch((reason) => {
        MessageUtils.showErrorMessage(reason.message);
    }).finally(() => {
        systemRoleManagerStore.isTableLoading = false;
    });
});
</script>
